<template>
<div>
  <h2>localStorage</h2>
  <button @click="saveData()">点我保存数据</button>
  <button @click="readData()">点我读数据</button>
  <button @click="deleteData()">点我删除数据</button>
  <button @click="deleteAllData()">点我清空数据</button>
</div>
</template>

<script>
export default {
  name: "WebStorage",
  data() {
    return {
      person: {
        name: 'JOJO',
        age: 20
      }
    }
  },
  methods: {
    saveData() {
      localStorage.setItem('msg', 'localStorage')
      localStorage.setItem('person', JSON.stringify(this.person))
    },
    readData() {
      console.log(localStorage.getItem('msg'))
      const person = localStorage.getItem('person')
      console.log(JSON.parse(person))
    },
    deleteData() {
      localStorage.removeItem('msg')
      localStorage.removeItem('person')
    },
    deleteAllData() {
      localStorage.clear()
    }
  }
}
</script>

<style scoped>

</style>
